import React, { useEffect, useState } from 'react';
import '../styles/Register.scss'
import { Button, Checkbox, Form, Input, notification } from 'antd';
import { useNavigate } from 'react-router-dom';
import { staff_login } from '../utils/api';

import '../styles/Login.scss'

interface Props {

}
function Login(props: Props) {

    var navigate = useNavigate()

    // 表单验证通过，执行
    const onFinish = (values: any) => {

        // 发起登录请求
        staff_login(values).then((res) => {
            if (res.data.code == 200) {
                notification.success({ message: '登录成功' });
                // 保存token，userinfo
                localStorage.setItem('token', res.data.token);
                localStorage.setItem('userinfo', JSON.stringify(res.data.userInfo));
                navigate('/index');//跳转首页
            }
            // console.log(res.data);
        })
    }

    const tiao = () => {
        navigate('/register');
    }

    return (
        <div className='register'>
            <div className="form-box">
                <Form
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="手机号"
                        name="phone"
                        rules={[{ required: true, message: '请正确手机号', pattern: /^1[3-9]\d{9}$/ }]}
                    >
                        <Input placeholder='请输入手机号' />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="pass"
                        rules={[{ required: true, message: '请输入密码' }]}
                    >
                        <Input placeholder='请输入密码' />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                        <Button onClick={tiao} style={{ marginLeft: 20 }}>
                            注册
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Login;